<template>
    <div class="tab">
        <div class="tab-list" @click="toRouter('/home', 0)" :class="{activeTab: tabIndex === 0}">{{ t('tab.home') }}
        </div>
        <div class="tab-list" @click="toRouter('/category', 1)" :class="{ activeTab: tabIndex === 1 }">
            {{ t('tab.category') }}</div>
        <div class="tab-list" @click="toRouter('/special', 2)" :class="{ activeTab: tabIndex === 2 }">{{
                t('tab.special')
        }}
        </div>
        <div class="tab-list" @click="toRouter('/user', 3)" :class="{ activeTab: tabIndex === 3 }">{{ t('tab.user') }}
        </div>
        <div class="tab-list" @click="toRouter('/code', 4)" :class="{ activeTab: tabIndex === 4 }">{{
                t('tab.code')
        }}
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'
const router = useRouter();
const { t } = useI18n()
const tabIndex = ref(0)
const tabList = ref({
    '/home': 0,
    '/category': 1,
    '/special': 2,
    '/user': 3,
    '/code': 4
    // 'comment': 4
})

// 跳转路由
const toRouter = (url, index) => {
    if (tabIndex.value === index) {
        return
    }
    tabIndex.value = index;
    router.push(url)
}

// 监听当前路由
watch(
    () => router.currentRoute.value,
    (newValue) => {
        tabIndex.value = tabList.value[newValue.path];
    },
    { immediate: true }
)

</script>

<style lang="scss" scoped>
.tab {
    display: flex;
    flex: 1;
    align-items: center;

    .tab-list {
        margin-right: 20px;
        cursor: pointer;
    }

    .activeTab {
        color: $font-color-primary;
    }
}
</style>
